<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>白马酒店</title>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/vue.js"></script>
    <!--引入elementUI的js库，必须在vue之后-->
    <script src="../element-ui/lib/index.js"></script>
    <!--引入elementUI的css库-->
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <link rel="stylesheet" href="../css/html.css">
    <style>
        .image-container {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }

        .image-preview {
            max-width: 100%;
            height: auto;
        }

        .hover-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255,255,255,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }

        .image-container:hover .hover-overlay {
            opacity: 1;
        }

        .file-input {
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 800px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246) ">
            <el-menu :default-openeds="['1']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>主菜单</template>
                    <el-menu-item-group>
                        <el-menu-item index="1-1" @click="jumpto('console')">控制台分析图</el-menu-item>
                        <el-menu-item index="1-2" @click="jumpto('user')">用户信息</el-menu-item>
                        <el-menu-item index="1-4" @click="jumpto('roomStatus')">客房信息</el-menu-item>
                        <el-menu-item index="1-5" @click="jumpto('checkInRoom')">办理入住</el-menu-item>
                        <el-menu-item index="1-6" @click="jumpto('hotelOrder')">酒店订单库</el-menu-item>
                        <el-menu-item index="1-7" @click="jumpto('everyDay')">每日明细</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header class="custom-header">
                <span class="header-title">白马酒店</span>
            </el-header>


            <el-main>
                <router-view></router-view>
            </el-main>

        </el-container>
    </el-container>
</div>
</body>
</html>
<script>
    // 创建员工管理组件
    const ConsoleManagement = {
        template: `
          <div>

          </div>
        `,
        data() {
            return {};
        },
        methods: {},
        mounted() {

        }
    };
    // 创建部门管理组件
    const UserManagement = {
        template: `
          <div>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="部门">
                <el-input v-model="formInline.name" placeholder="部门"></el-input>
              </el-form-item>
              <el-form-item label="经理">
                <el-input v-model="formInline.admin" placeholder="经理"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-close" @click="clearGender"></el-button>
                <el-button type="primary" @click="selectAll">查询</el-button>
              </el-form-item>
              <el-form-item style="float: right;">
                <el-button type="primary" @click="addSubmit" style="">新增部门</el-button>
              </el-form-item>
            </el-form>
            <el-table :data="tableData">
              <el-table-column prop="name" label="部门名称" width="420">
              </el-table-column>
              <el-table-column prop="admin" label="部门经理" width="440">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button @click="handleEdit(scope.row)">修改</el-button>
                  <el-button @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-dialog title="部门信息" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item label="部门名称" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门经理" :label-width="formLabelWidth">
                  <el-input v-model="form.admin" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleUpdateOrAdd">确 定</el-button>
              </div>
            </el-dialog>
            <div class="block">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="5"
                  :current-page="pageNum"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total" style="margin: 0 auto; text-align: center;">
              </el-pagination>
            </div>
          </div>

        `,
        data() {
            return {
                tableData: [],
                pageNum: 1,
                pageSize: 5,
                total: 5,
                formInline: {
                    name: '',
                    admin: ''
                },
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    id: '',
                    name: '',
                    admin: '',
                },
                formLabelWidth: '120px',
                updateOrAdd: ''
            };
        },
        methods: {
            selectAll() {
                let url = "http://localhost:8080/dept/selectAll?" + "pageNum=" + this.pageNum + "&pageSize=" + this.pageSize
                if (this.formInline.name !== undefined) {
                    url += "&name=" + this.formInline.name
                }
                if (this.formInline.admin !== undefined) {
                    url += '&admin=' + this.formInline.admin
                }
                axios.get(url).then(resp => {
                    this.tableData = resp.data.data.records;
                    this.total = resp.data.data.total;
                })
            },
            handleEdit(row) {
                this.updateOrAdd = 1;
                this.dialogFormVisible = true;
                console.log(row);
                axios.get("http://localhost:8080/dept/updateById?id=" + row.id).then(resp => {
                    this.form.id = resp.data.data.id;
                    this.form.name = resp.data.data.name;
                    this.form.admin = resp.data.data.admin;
                })
            },
            handleDelete(row) {
                axios.delete("http://localhost:8080/dept/deleteById?id=" + row.id).then(resp => {
                    if (resp.data.code == 1) {
                        this.$message({
                            message: '恭喜你，这是一条成功消息',
                            type: 'success'
                        });
                        this.tableData.length -= 1;
                        // 删除数据后，判断当前页是否还有数据
                        if (this.tableData.length === 0) {
                            // 如果当前页没有数据，将 pageNum 减一，但确保不小于1
                            this.pageNum = Math.max(this.pageNum - 1, 1);
                        }
                        // 重新查询数据
                        this.selectAll();
                    } else {
                        this.$message.error('错了哦，这是一条错误消息');
                    }
                })
            },
            handleSizeChange(newSize) {
                console.log("每页几条数据" + newSize);
                this.pageSize = newSize;
                this.selectAll();
            },
            handleCurrentChange(newPage) {
                console.log("第几页" + newPage);
                this.pageNum = newPage;
                this.selectAll();
            },
            handleUpdateOrAdd() {
                if (this.updateOrAdd == 1) {
                    axios.put("http://localhost:8080/dept/deptUpdate", this.form).then(resp => {
                        if (resp.data.code == 1) {
                            this.$message({
                                message: '恭喜你，这是一条成功消息',
                                type: 'success'
                            });
                            // 更新数据
                            this.dialogFormVisible = false; // 隐藏对话框
                            // 重新查询数据
                            this.selectAll();
                        } else {
                            this.$message.error('错了哦，这是一条错误消息');
                        }
                    })
                } else {
                    axios.post("http://localhost:8080/dept/addDept", this.form).then(resp => {
                        if (resp.data.code == 1) {
                            this.$message({
                                message: '恭喜你，这是一条成功消息',
                                type: 'success'
                            });
                            // 更新数据
                            this.dialogFormVisible = false; // 隐藏对话框
                            // 重新查询数据
                            this.selectAll();
                        } else {
                            this.$message.error('错了哦，这是一条错误消息');
                        }
                    })
                }
            },
            clearGender() {
                this.formInline.name = '';
                this.formInline.admin = '';
            },
            addSubmit() {
                this.form.id = '';
                this.form.name = '';
                this.form.admin = '';
                this.updateOrAdd = 0;
                this.dialogFormVisible = true;
            },
        },
        mounted() {
            console.log("部门的钩子函数触发了")
            this.selectAll();
        }
    };
    const RoomStatusManagement = {
        template: `
          <div>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="房间号">
                <el-input v-model="formInline.name" placeholder="房间号"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-close" @click="clearGender"></el-button>
                <el-button type="primary" @click="handleSearch">查询</el-button>
              </el-form-item>
              <el-form-item style="float: right;">
                <el-button type="primary" @click="handleAdd" style="">新增客房</el-button>
              </el-form-item>
            </el-form>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column label="房间号" prop="number"></el-table-column>
              <el-table-column label="状态">
                <template slot-scope="scope">
                    <span>
                      {{ scope.row.status === 0 ? '空闲' : scope.row.status === 1 ? '已入住' : '维修中' }}
                    </span>
                </template>
              </el-table-column>
              <el-table-column label="大小" prop="size"></el-table-column>
              <el-table-column label="价格" prop="price"></el-table-column>

              <el-table-column label="图片">
                <template slot-scope="scope">
                  <img :src="scope.row.images" style="width: 50px; height: 50px;"/>
                </template>
              </el-table-column>

              <el-table-column label="介绍">
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top" slot="reference">
                    <p>{{ scope.row.introduce }}</p>
                    <el-tag size="medium" slot="reference">详情</el-tag>
                  </el-popover>
                </template>
              </el-table-column>

              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
                  <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-dialog
                title="编辑信息"
                :visible.sync="dialogVisible"
                width="30%"
            >
              <el-form :model="editForm">
                <!-- 表单内容，根据需要添加 -->
                <el-row type="flex" justify="space-between">
                  <el-col :span="11">
                    <el-form-item label="房间号">
                      <el-input v-model="editForm.number" :disabled="true" style="width: 200px;"></el-input>
                    </el-form-item>
                  </el-col>
                  <!-- ... 其他表单项 ... -->
                  <el-col :span="12">
                    <el-form-item label="状态">
                      <el-select v-model="editForm.status" placeholder="请选择状态">
                        <el-option label="未入住" :value="0"></el-option>
                        <el-option label="已入住" :value="1"></el-option>
                        <el-option label="维修中" :value="2"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row type="flex" justify="space-between">
                  <el-col :span="12">
                    <el-form-item label="大小">
                      <el-input v-model="editForm.size"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="价格">
                      <el-input v-model="editForm.price"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="图片">
                  <div
                      v-if="editForm.images"
                      class="image-container"
                      @click="triggerFileInput"
                  >
                    <img :src="editForm.images" class="image-preview" />
                    <div class="hover-overlay">
                      更换图片
                    </div>
                  </div>
                  <input
                      type="file"
                      ref="fileInput"
                      class="file-input"
                      @change="handleFileChange"
                      accept=".png, .jpg"
                  />
                </el-form-item>
                  <el-form-item label="简介">
                    <el-input v-model="editForm.introduce"></el-input>
                  </el-form-item>
              </el-form>

              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSave">保存</el-button>
              </div>
            </el-dialog>
            <el-dialog
                title="新增信息"
                :visible.sync="dialogVisibleAdd"
                width="30%"
            >
              <el-form :model="addForm">
                <!-- 表单内容，根据需要添加 -->
                <el-row type="flex" justify="space-between">
                  <el-col :span="11">
                    <el-form-item label="房间号">
                      <el-input v-model="addForm.number" style="width: 200px;"></el-input>
                    </el-form-item>
                  </el-col>
                  <!-- ... 其他表单项 ... -->
                  <el-col :span="12">
                    <el-form-item label="状态">
                      <el-select v-model="addForm.status" placeholder="请选择状态">
                        <el-option label="未入住" :value="0"></el-option>
                        <el-option label="已入住" :value="1"></el-option>
                        <el-option label="维修中" :value="2"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row type="flex" justify="space-between">
                  <el-col :span="12">
                    <el-form-item label="大小">
                      <el-input v-model="addForm.size"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="价格">
                      <el-input v-model="addForm.price"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="图片">
                  <!-- 显示图片上传区域，无论 addForm.images 是否有值 -->
                  <div class="image-container" @click="triggerFileInput">
                    <!-- 只有当 addForm.images 有值时才显示图片 -->
                    <img v-if="addForm.images" :src="addForm.images" class="image-preview" />
                    <!-- 默认图片或上传提示 -->
                    <div v-else class="image-placeholder">
                      点击上传图片
                    </div>
                    <div class="hover-overlay">
                      更换图片
                    </div>
                  </div>
                  <input
                      type="file"
                      ref="fileInput"
                      class="file-input"
                      @change="handleFileChange"
                      accept=".png, .jpg"
                  />
                </el-form-item>
                <el-form-item label="简介">
                  <el-input v-model="addForm.introduce"></el-input>
                </el-form-item>
              </el-form>

              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleAdd = false">取消</el-button>
                <el-button type="primary" @click="handleAdd">新增</el-button>
              </div>
            </el-dialog>
            <div class="block">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="5"
                  :current-page="pageNum"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total" style="margin: 0 auto; text-align: center;">
              </el-pagination>
            </div>

          </div>

        `,
        data() {
            return {
                hover: false, // 控制悬停提示层的显示
                searchText: '', // 绑定到搜索框的数据
                tableData: [],
                dialogVisible: false, // 修改控制弹窗显示
                dialogVisibleAdd: false, // 新增控制弹窗显示
                roomImage: '',
                editId: '',
                editForm: {
                    id: '',
                    status: '',
                    number: '',
                    size: '',
                    price: '',
                    images: '',
                    introduce: '',
                }, // 编辑表单的数据
                addForm: {
                    id: '',
                    status: '',
                    number: '',
                    size: '',
                    price: '',
                    images: '',
                    introduce: '',
                }, // 编辑表单的数据
                formInline: {
                    name: '',
                },
                pageNum: 1,
                pageSize: 5,
                total: 5,
            };
        },
        methods: {
            // 触发文件选择器
            triggerFileInput() {
                this.$refs.fileInput.click();
            },
            // 处理文件选择
            handleFileChange(event) {
                const file = event.target.files[0];
                if (file) {
                    // Create FormData object
                    let formData = new FormData();
                    // Append the file to the FormData object
                    formData.append('images', file);
                    formData.append('id',this.editId)

                    // Send a POST request to the backend server
                    axios.post('http://192.168.23.135:8080/upload/image', formData, {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    })
                        .then(response => {
                            // Request was successful, handle the response
                            console.log(response.data);
                            // If the backend returns the URL of the image, update editForm.images
                            this.editForm.images = response.data.data; // Assuming 'imageUrl' is the key where the URL is stored
                        })
                        .catch(error => {
                            // The request failed, handle the error
                            console.error(error);
                        });
                }
            },
            handleEdit(id) {
                console.log(id);
                this.editId = id;
                this.editFormData = this.tableData.find(room => room.id === id);
                console.log(this.editFormData)
                this.dialogVisible = true;
                url = "http://192.168.23.135:8080/room/id?id=" + id;
                console.log(url);
                axios.get(url).then(response => {
                    this.editForm = response.data.data;
                });
            },
            handleDelete(index, row) {
                console.log(index, row);
                axios.delete("http://192.168.23.135:8080/room/" + row.id).then(response => {
                    if (response.data.code === 1){
                        this.$message({
                            type:'success',
                            message: '删除成功'
                        });
                        this.selectRoomAll();
                    }else {
                        this.$message({
                            type:'error',
                            message: '删除失败'
                        })
                    }
                })
            },
            handleAdd() {
                // 处理新增操作
                console.log('点击了新增按钮');
                this.dialogVisibleAdd = true;
                console.log(this.addForm)
                axios.post("http://192.168.23.135:8080/room", this.addForm).then(response => {
                    if (response.data.code === 1){
                        this.$message({
                            type:'success',
                            message: '新增成功'
                        });
                        this.selectRoomAll();
                    }else {
                        this.$message({
                            type:'error',
                            message: '新增失败'
                        })
                    }
                })
            },
            handleSearch() {
                // 处理搜索操作
                console.log('进行搜索');
                this.selectRoomAll();
            },
            selectRoomAll() {
                url = "http://192.168.23.135:8080/room/page?" + "page=" + this.pageNum + "&pageSize=" + this.pageSize;
                if (this.formInline.name !== undefined && this.formInline.name!== '') {
                    url += "&number=" + this.formInline.name
                }
                axios.get(url).then(response => {
                    this.tableData = response.data.data.records;
                    this.total = response.data.data.total;
                    console.log(this.rooms);
                });
            },
            handleSave() {
                axios.put("http://192.168.23.135:8080/room", this.editForm).then(response => {
                    if (response.data.code === 1){
                        this.$message({
                            type:'success',
                            message: '修改成功'
                        });
                        this.dialogVisible = false;
                        this.selectRoomAll();
                    }else {
                        this.$message({
                            type:'error',
                            message: '修改失败'
                        });
                    }
                });
            },
            clearGender() {
                this.formInline.name = '';
            },
            handleSizeChange(newSize) {
                console.log("每页几条数据" + newSize);
                this.pageSize = newSize;
                this.selectRoomAll();
            },
            handleCurrentChange(newPage) {
                console.log("第几页" + newPage);
                this.pageNum = newPage;
                this.selectRoomAll();
            },
        },
        mounted() {
            this.selectRoomAll();
        }
    };
    const CheckInRoomManagement = {
        template: `
          <div>
            <el-button v-for="room in rooms" :key="room.id"
                       :class="room.status === 0 ? 'green-button' : room.status === 1 ? 'red-button' : 'yellow-button'"
                       @click="handleRoomClick(room)">
              {{ room.number }}
            </el-button>

            <el-dialog title="" :visible.sync="dialogFormVisible">
              <el-form ref="form" :model="order" label-width="80px">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="用户姓名">
                      <el-input v-model="order.name" style="width: 150px;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="用户年龄">
                      <el-input v-model="order.age" style="width: 150px;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="用户性别">
                      <el-select v-model="order.sex" placeholder="请选择男女">
                        <el-option label="男" value="1"></el-option>
                        <el-option label="女" value="2"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="16">
                    <el-form-item label="用户电话">
                      <el-input v-model="order.phone" style="width: 350px"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="入住人数">
                      <el-select v-model="order.checkInNumber" placeholder="请选择人数">
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="身份证号">
                  <el-input v-model="order.userNumber"></el-input>
                </el-form-item>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="押金">
                      <el-input v-model="order.cashPledge"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="押金状态">
                      <el-input v-model="order.cashPledgeStatus"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="入住时间">
                      <el-date-picker
                          v-model="order.checkInDate"
                          type="datetime"
                          placeholder="选择入住时间"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          default-time="12:00:00">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="退房时间">
                      <el-date-picker
                          v-model="order.expectedCheckOutDate"
                          type="datetime"
                          placeholder="选择退房时间"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          default-time="14:00:00">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="客人需求">
                  <el-input v-model="order.nores"></el-input>
                </el-form-item>
                <el-form>
                  <el-form-item v-if="currentRoomStatus === 0" class="centered-buttons">
                    <el-button type="primary" @click="onSubmit">立即入住</el-button>
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                  </el-form-item>

                  <el-form-item v-if="currentRoomStatus === 1" class="centered-buttons">
                    <el-button type="primary" @click="offSubmit">退住</el-button>
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                  </el-form-item>
                </el-form>

              </el-form>
            </el-dialog>
          </div>

        `,
        data() {
            return {
                rooms: [
                    {
                        id: 1,
                        number: '101',
                        status: 0,
                    },
                    {
                        id: 2,
                        number: '102',
                        status: 1,
                    },
                    {
                        id: 3,
                        number: '102',
                        status: 2,
                    },

                ],
                dialogFormVisible: false,
                formLabelWidth: '120px',
                currentRoomStatus: null, // 当前选中房间的状态
                // diaFormVisible: false, // 控制对话框的显示
                roomId: '',
                checkOutDate: new Date(),
                order: {
                    name: '',
                    age: '',
                    sex: '',
                    phone: '',
                    userNumber: '',
                    checkInNumber: '',
                    nores: '',
                    cashPledge: 200,
                    cashPledgeStatus: '',
                    status: '',
                    checkInDate: '',
                    expectedCheckOutDate: '',
                    roomNumber: '',
                }
            };
        },
        methods: {
            handleRoomClick(room) {
                // 处理房间点击事件
                console.log('点击了房间:', room.number);
                this.clearOrderData();
                this.roomId = room.id;
                this.order.roomNumber = room.number;
                if (room.status === 0) {
                    // 绿色按钮，打开表单
                    this.currentRoomStatus = 0;
                    this.dialogFormVisible = true;
                } else if (room.status === 1) {
                    this.currentRoomStatus = 1;
                    this.selectedRoom();
                    this.dialogFormVisible = true;
                } else if (room.status === 2) {
                    // 黄色按钮，弹窗提示房间正在维修
                    this.$message.warning('该房间正在维修');
                }
            },
            onSubmit() {
                console.log(this.order);
                axios.post("http://192.168.23.58:8080/order/add", this.order, {
                    headers: {
                        'Content-Type': 'application/json', // 设置请求头的Content-Type
                        'Access-Control-Allow-Origin': '*' // 设置允许的跨域源，可以根据实际需求修改
                    }
                }).then(response => {
                    if (response.data.code === 1) {
                        this.$message.success('入住成功');
                    } else {
                        this.$message.success(response.data.msg);
                    }
                    this.dialogFormVisible = false;
                });
                this.selectRoomAll();
            },
            selectedRoom() {
                axios.get("http://192.168.23.135:8080/room/order/user/" + this.roomId).then(response => {
                    this.order = response.data.data
                })
            },
            clearOrderData() {
                this.order = {
                    name: '',
                    age: '',
                    sex: '',
                    phone: '',
                    userNumber: '',
                    checkInNumber: '',
                    nores: '',
                    cashPledge: 200,
                    cashPledgeStatus: '',
                    status: '',
                    checkInDate: '',
                    expectedCheckOutDate: '',
                    roomNumber: '',
                }
            },
            offSubmit() {
                this.checkOutDate = this.checkOutDate.format('yyyy-MM-dd HH:mm:ss');
                console.log(this.checkOutDate)
                axios.post("http://192.168.23.135:8080/order/off").then(response => {
                    if (response.data.code === 200) {
                        this.$message.success('退房成功');
                    } else {
                        this.$message.success(response.data.msg);
                    }
                })
            },
            selectRoomAll() {
                axios.get("http://192.168.23.135:8080/room/selectAll").then(response => {
                    this.rooms = response.data.data;
                    console.log(this.rooms);
                });
            }
        },
        mounted() {
            this.selectRoomAll();
        }
    };
    const HotelOrderManagement = {
        template: `
          <div>

          </div>

        `,
        data() {
            return {};
        },
        methods: {},
        mounted() {

        }
    };
    const EveryDayManagement = {
        template: `
          <div>

          </div>

        `,
        data() {
            return {};
        },
        methods: {},
        mounted() {

        }
    };
    const router = new VueRouter({
        routes: [
            {path: '/', redirect: '/console'},
            {path: '/console', component: ConsoleManagement},
            {path: '/user', component: UserManagement},
            {path: '/roomStatus', component: RoomStatusManagement},
            {path: '/checkInRoom', component: CheckInRoomManagement},
            {path: '/hotelOrder', component: HotelOrderManagement},
            {path: '/everyDay', component: EveryDayManagement},
            // 其他路由规则
        ]
    });
    new Vue({
        el: "#app",
        router,
        methods: {
            jumpto(path) {
                path = '/' + path;
                if (path !== this.$route.path) {
                    this.$router.push(path)
                }
            },
        },
        data: {},

    })
</script>
